<script type="text/javascript">
  $().ready(function() {
    $("#password_reset_form").validate({
      rules: {  "password": {
          required: true,
          rangelength: [6,16]
        },"new_password": {
          required: true,
          rangelength: [6,16]
        },"new_password_confirmation": {
          required: true,
          equalTo : "#new_password"
        }
      },
      messages:{
        "password": {
          required: "原始密码不能为空！",
          rangelength: "密码长度在6-16个字符之间"
        },"new_password": {
          required: "新密码不能为空！",
          rangelength: "新密码长度在6-16个字符之间"
        },"new_password_confirmation": {
          required: "确认新密码不能为空！",
          equalTo : "两次密码输入不一致"
        }
      },
      errorPlacement: function(error,element){
        error.appendTo(element.next());
      }
    });
    $("#email_reset_form").validate({
      rules: { "account[email]": {
          required: true,
          email: true,
          remote:"/accounts/valid_email_exist"
        }
      },
      messages:{
        "account[email]": {
          required: "请输入E-mail",
          email: "请输入正确格式的E-mail",
          remote: "邮箱已存在"
        }
      },
      errorPlacement: function(error,element){
        error.appendTo(element.next());
      }
    });
  });
</script>
<div id="edit_pw_panel">
  <ul id="popup_tab">
    <li class="selected_item"  id="password_tab">
      <a href="#" onclick="change_tab('password_tab');">修改密码</a>
    </li>
    <li  id="email_tab">
      <a href="#" onclick="change_tab('email_tab');">修改邮件</a>
    </li>
  </ul>
  <div class="tab_body" id="password_div">
    <% form_remote_tag(:url => {:action => "update_user_password"},:html => {:id => 'password_reset_form'}) do %>
      <ul>
        <li>
          <label for="old_password">原始密码</label>
          <%= password_field_tag 'password', nil,:class => "text" %>
          <span></span>
        </li>
        <li>
          <label for="new_password">新密码</label>
          <%= password_field_tag 'new_password', nil,:class => "text" %>
          <span></span>
        </li>
        <li>
          <%= password_field_tag 'new_password_confirmation', nil, :class => "text" %>
          <span></span>
        </li>
      </ul>
      <p class="submit">
        <%=submit_tag "确认修改", :class => "submit"%>
      </p>
    <% end %>
  </div>
  <div class="tab_body"  id="email_div" style="display:none">
    <% form_remote_tag(:url => {:action => "update_user_email"}, :html => {:id => 'email_reset_form'}) do %>
      <ul>
        <li>
          <label for="old_email">当前邮件</label>
          <div id="current_email"><%= @account.email %></div>
        </li>
        <li>
          <label for="new_email">新邮件</label>
          <%= text_field_tag 'account[email]', nil, :class => "text" %>
          <span></span>
        </li>
      </ul>
      <p class="submit">
        <%=submit_tag "确认修改", :class => "submit"%>
      </p>
    <% end %>
  </div>
</div>

<script language=JavaScript>
  function change_tab(tab){
    if (tab == "email_tab"){
      $("#email_tab").addClass("selected_item");
      $("#password_tab").removeClass("selected_item");
      $("#email_div").css("display","block");
      $("#password_div").css("display","none");
    }else if(tab == "password_tab"){
      $("#password_tab").addClass("selected_item");
      $("#email_tab").removeClass("selected_item");
      $("#password_div").css("display","block");
      $("#email_div").css("display","none");
    }
  }
</script>